<template>
    <div>
        <div class="breadcrumb-box">
            <el-breadcrumb separator-class="el-icon-arrow-right">
                <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
                <el-breadcrumb-item>开票信息</el-breadcrumb-item>
            </el-breadcrumb>
        </div>
        <div class="address-rece container">
            <left-nav-bar :active="active"></left-nav-bar>
            <div class="right">
                <!--        <div style="height:91px;"></div>-->
                <div class="line-ti">
                    <div>新增开票信息</div>
                </div>
                <div style="height:20px"></div>
                <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
                    <el-form-item label="发票类型">
                        <el-select style="width: 200px;" v-model="ruleForm.type" placeholder="请选择发票类型">
                            <el-option label="企业" value="1"></el-option>
                            <el-option label="个人" value="0"></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="名称" prop="name">
                        <el-input style="width: 520px;" v-model="ruleForm.name" placeholder="请输入名称"></el-input>
                    </el-form-item>
                    <el-form-item label="识别号" prop="identifier" v-if="ruleForm.type == 1">
                        <el-input style="width: 520px;" v-model="ruleForm.identifier" placeholder="请输入识别号"></el-input>
                    </el-form-item>
                    <el-form-item label="单位地址" prop="type1_address" v-if="ruleForm.type == 1">
                        <el-input style="width: 520px;" v-model="ruleForm.type1_address" placeholder="请输入单位地址"></el-input>
                    </el-form-item>
                    <el-form-item label="电话号码" prop="phone">
                        <el-input style="width: 520px;" v-model="ruleForm.phone" placeholder="请输入联系电话"></el-input>
                    </el-form-item>
                    <el-form-item label="开户银行" prop="bank">
                        <el-input style="width: 520px;" v-model="ruleForm.bank" placeholder="请输入开户行"></el-input>
                    </el-form-item>
                    <el-form-item label="银行账户" prop="card_no">
                        <el-input style="width: 520px;" v-model="ruleForm.card_no" placeholder="请输入银行卡号"></el-input>
                    </el-form-item>
                    <el-form-item label="收票地址" prop="address">
                        <el-input style="width: 520px;" v-model="ruleForm.address" placeholder="请输入收票地址"></el-input>
                    </el-form-item>
                    <el-form-item label="联系人" prop="type1_username" v-if="ruleForm.type == 1">
                        <el-input style="width: 520px;" v-model="ruleForm.type1_username" placeholder="请输入收票地址"></el-input>
                    </el-form-item>
                    <el-form-item label="联系电话" prop="type1_phone" v-if="ruleForm.type == 1">
                        <el-input style="width: 520px;" v-model="ruleForm.type1_phone" placeholder="请输入收票地址"></el-input>
                    </el-form-item>
                    <el-form-item label="设为默认">
                        <el-switch v-model="ruleForm.is_default" active-color="#da213d">
                        </el-switch>
                    </el-form-item>
                    <el-form-item>
                        <el-button type="primary" @click="submitForm('ruleForm')">立即创建</el-button>
                    </el-form-item>
                </el-form>
            </div>
        </div>
        <div style="height: 200px"></div>
    </div>
</template>

<script>
import leftNavBar from "@components/leftNavBar";
import { invoiceSave } from "@api/user";

export default {
    components: {
        leftNavBar,
    },
    data() {
        return {
            active: 7,
            page: 1,
            limit: 20,
            addressList: [],
            addressType: "",

            ruleForm: {
                name: "",
                is_default: false,
                type: "",
                identifier: "",
                bank: "",
                phone: "",
                card_no: "",
                address: "",
                type1_username:"",
                type1_phone:"",
                type1_address:""
            },
            rules: {
                name: [
                    {
                        required: true,
                        message: "请输入信息",
                        trigger: "blur",
                    },
                ],
                identifier: [
                    {
                        required: true,
                        message: "请输入信息",
                        trigger: "blur",
                    },
                ],
                bank: [
                    {
                        required: true,
                        message: "请输入信息",
                        trigger: "blur",
                    },
                ],
                phone: [
                    {
                        required: true,
                        message: "请输入信息",
                        trigger: "blur",
                    },
                ],
                name: [
                    {
                        required: true,
                        message: "请输入信息",
                        trigger: "blur",
                    },
                ],
                card_no: [
                    {
                        required: true,
                        message: "请输入信息",
                        trigger: "blur",
                    },
                ],
                address: [
                    {
                        required: true,
                        message: "请输入信息",
                        trigger: "blur",
                    },
                ],
                region: [
                    {
                        required: true,
                        message: "请选择发票类型",
                        trigger: "change",
                    },
                ],
                type1_address: [
                    {
                        required: true,
                        message: "收票地址",
                        trigger: "blur",
                    },
                ],
                type1_phone: [
                    {
                        required: true,
                        message: "联系电话",
                        trigger: "blur",
                    },
                ],
                type1_username: [
                    {
                        required: true,
                        message: "联系人",
                        trigger: "blur",
                    },
                ],
            },
        };
    },
    mounted() {},
    methods: {
        // 提交数据
        submitForm(formName) {
            let data = this.ruleForm;
            if(data.type == ''){
                this.$dialog.toast({ mes: "请选择发票类型" });
                return
            }
            this.$refs[formName].validate((valid) => {
                if (valid) {
                    if (data.is_default) {
                        data.is_default = 1;
                    } else {
                        data.is_default = 0;
                    }
                    invoiceSave(data)
                        .then((res) => {
                            if (res.status == 200) {
                                this.$dialog.toast({ mes: "添加成功" });
                                setTimeout(() => {
                                    this.$router.go(-1);
                                }, 1500);
                                return;
                            }
                            this.$dialog.toast({ mes: res.msg });
                        })
                        .catch((err) => {
                            console.log(err);
                        });
                }
            });
        },
    },
};
</script>
<style >
.el-button {
    padding: 13px 97px;
    font-size: 18px;
}
.el-button--primary {
    background: #da213d;
    color: #fff;
    border-color: #da213d;
}
.el-button--primary:hover,
.el-button--primary:focus {
    background: #da213d;
    border-color: #da213d;
    color: #fff;
}
</style>
<style scoped  rel="stylesheet/scss" lang="scss" scoped>
$color: #da213d;
.address-rece {
    /*width: 70%;*/
    margin: 0 auto;
    display: flex;

    .right {
        width: 1000px;
        margin-left: 32px;

        .line-ti {
            width: 100%;
            border-bottom: 1px solid #dbdbdb;
            position: relative;
            &::before {
                position: absolute;
                left: 0;
                bottom: 0;
                width: 72px;
                height: 3px;
                content: "";
                background: $color;
            }
            > div {
                color: #da213d;
                font-size: 18px;
                font-family: MicrosoftYaHei-Bold;
                // width: 90px;
                line-height: 36px;
                font-weight: 600;
                // text-align: center;
            }
        }
    }
}
</style>
